<template>
  <div class="container">
    <menu-item></menu-item>
    <div class="content-wrap">
      <div class="header">
        <div class="tab-wrap">
          <div
            @click="handleBtn(item.jylbnm)"
            class="tab"
            v-for="(item, index) in tabList"
            :key="index"
          >
            <img v-if="item.jylbnm == '蔬菜'" :src="img_2710" alt />
            <img v-if="item.jylbnm == '水果'" :src="img_2755" alt />
            <img v-if="item.jylbnm == '豆制品'" :src="img_2768" alt />
            <img v-if="item.jylbnm == '肉类'" :src="img_2776" alt />
            <img v-if="item.jylbnm == '水产'" :src="img_2793" alt />
            <img v-if="item.jylbnm == '其它'" :src="img_2815" alt />
            <img v-if="item.jylbnm == '南北货'" :src="img_2875" alt />
            <img v-if="item.jylbnm == '熟食'" :src="img_6828" alt />
            <img v-if="item.jylbnm == '全部'" :src="img_null" alt />
            <!-- <img :src="'img_' + item.id" alt="" /> -->
            <!-- <img :src="'src/assets/images/shcx/t' + item.id + '.png'" alt="" /> -->
            {{ item.jylbnm }}
          </div>
        </div>
      </div>
      <div class="content">
        <div class="table-wrap">
          <div class="table">
            <div class="tab">
              <span class="sort">序号</span>
              <span class="shanghu">商户</span>
              <span class="hao">摊位号</span>
              <span class="fanwei">经营范围</span>
              <span class="dengji">信用评级</span>
              <span class="num">入驻时间</span>
            </div>
            <el-scrollbar element-loading-background="transparent" v-loading="loading">
              <div class="item-wrap">
                <div
                  v-for="(item, index) in tableList"
                  :key="index"
                  class="item"
                  @click="handleDetail(item)"
                >
                  <span class="sort">{{ index + 1 }}</span>
                  <span class="shanghu">{{ item.name }}</span>
                  <span class="hao">{{ item.twhname }}</span>
                  <span class="fanwei">{{ item.jyfw }}</span>
                  <span class="dengji">
                    <img v-for="i in item.xydj * 1" :key="i" src="@img/cxgs/cxgs_13.png" alt />
                    <img v-for="i in 5 - item.xydj" :key="i" src="@img/cxgs/cxgs_10.png" alt />
                  </span>
                  <span class="num">
                    {{
                    item.ruzhutime ? handleStr(item.ruzhutime) : item.ruzhutime
                    }}
                  </span>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="dialog">
      <van-dialog
        :lock-scroll="false"
        :show-confirm-button="false"
        :show-cancel-button="false"
        :closeOnClickOverlay="true"
        :overlay="true"
        :show="dialogVisible"
      >
        <detail1 :userinfo="userinfo"></detail1>
      </van-dialog>
    </div>-->
    <div class="dialog">
      <van-overlay z-index="100" :lock-scroll="false" :show="dialogVisible" @click="dialogVisible = false">
        <div class="wrapper" @click.stop>
          <detail1 :userinfo="userinfo"></detail1>
        </div>
      </van-overlay>
    </div>
  </div>
</template>
<script setup>
import detail1 from "./detail1.vue";
import emitter from "@/utils/eventBus";
import menuItem from "@/components/common/menuItem.vue";
import {
  img_2710,
  img_2755,
  img_2768,
  img_2776,
  img_2793,
  img_2815,
  img_2875,
  img_6828,
  img_null
} from "@/utils/img";
import { getSHLB, getSHXX } from "@/apis/subjectInfo";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const router = useRouter();
let loading = ref(false);
const tabList = ref();
const tableList = ref();
const getList = () => {
  getSHLB().then(res => {
    tabList.value = res.data.reverse();
    getInfo(tabList.value[0].jylbnm);
  });
};
getList();
const getInfo = jylbnm => {
  loading.value = true;
  getSHXX(jylbnm).then(res => {
    tableList.value = res.data;
    loading.value = false;
  });
};
const handleBtn = id => {
  getInfo(id);
};
const handleStr = str => {
  return str.slice(0, 10);
};
const dialogVisible = ref(false);
const userinfo = ref();
const handleDetail = item => {
  userinfo.value = item;
  dialogVisible.value = true;
  // router.push({ path: "/shopDetail", query: item });
};
emitter.on("closeDialog", () => {
  dialogVisible.value = false;
});
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .content-wrap {
    height: 500px;
    display: flex;
    flex-direction: column;
    .header {
      width: 100%;
      display: flex;
      justify-content: center;
      .tab-wrap {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .tab {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #fff;
          img {
            width: 30px;
          }
        }
      }
    }
    .content {
      padding-top: 20px;
      height: 420px;
      .table-wrap {
        height: 100%;
        .table {
          height: 100%;
          .tab {
            height: 40px;
            line-height: 40px;
            background: #4cc1ef;
            border-top-left-radius: 23px;
            border-top-right-radius: 23px;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            color: #fff;
            font-size: 15px;
            span {
              position: relative;
              display: inline-block;
            }
            .sort {
              left: 5px;
            }
            .shanghu {
              left: 10px;
            }
            .hao {
              left: 17px;
            }
            .fanwei {
              left: 22px;
            }
            .dengji {
              left: 12px;
              img {
                width: 16px;
              }
            }
            .num {
            }
            .detail {
            }
          }
          .item-wrap {
            height: calc(100% - 51px);
          }
          .el-scrollbar {
            height: calc(100% - 51px);
          }
          .item {
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            padding: 0 25px;
            color: #000;
            font-size: 13px;
            background: #c0edff;
            &:nth-child(2n-1) {
              background: #fff;
            }
            span {
              display: inline-block;
              font-size: 11px;
              position: relative;
            }
            .sort {
              width: 14px;
              text-align: center;
            }
            .shanghu {
              left: 40px;
              width: 60px;
              left: 40px;
              text-align: center;
            }
            .hao {
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: normal;
              width: 100px;
              text-align: center;
              left: 40px;
              word-wrap: break-word;
            }
            .fanwei {
              display: flex;
              align-items: center;
              line-height: normal;
              width: 60px;
              text-align: center;
              left: 76px;
              word-wrap: break-word;
              overflow: hidden;
              text-overflow: ellipsis;
              // display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .dengji {
              left: 60px;
              width: 120px;
              text-align: center;
              img {
                width: 16px;
              }
            }
            .num {
              left: 56px;
              width: 100px;
            }
          }
        }
      }
    }
  }
}
.dialog {
  ::v-deep .van-dialog {
    height: 85%;
    width: 90%;
    .van-popup {
      height: 100vh;
      width: 100%;
      .van-dialog__content {
        height: 100%;
      }
    }
  }
}
</style>
